<template>
  <tab-bar>
    <tab-bar-item path="home"
                  activeColor="red">
      <img src="~assets/img/tabbar/home.svg"
           alt=""
           slot="item-icon">
      <img src="~assets/img/tabbar/home_hover.svg"
           alt=""
           slot="item-icon-hover">
      <div slot="item-text">首页</div>
    </tab-bar-item>

    <tab-bar-item path="category"
                  activeColor="red">
      <img src="~assets/img/tabbar/category.svg"
           alt=""
           slot="item-icon">
      <img src="~assets/img/tabbar/category_hover.svg"
           alt=""
           slot="item-icon-hover">
      <div slot="item-text">分类</div>
    </tab-bar-item>

    <tab-bar-item path="cart"
                  activeColor="red">
      <img src="~assets/img/tabbar/cart.svg"
           alt=""
           slot="item-icon">
      <img src="~assets/img/tabbar/cart_hover.svg"
           alt=""
           slot="item-icon-hover">
      <div slot="item-text">购物车</div>
    </tab-bar-item>

    <tab-bar-item path="aboutus"
                  activeColor="red">
      <img src="~assets/img/tabbar/aboutus.svg"
           alt=""
           slot="item-icon">
      <img src="~assets/img/tabbar/aboutus_hover.svg"
           alt=""
           slot="item-icon-hover">
      <div slot="item-text">我的</div>
    </tab-bar-item>
  </tab-bar>
</template>
<script>
import TabBar from 'components/common/TabBar/tabbar'
import TabBarItem from 'components/common/TabBar/tabbarItem'
export default {
  name: 'MainTabBar',
  components: {
    TabBar,
    TabBarItem
  }

}

</script>
<style>
</style>